【アメブロカスタマイズ】背景色やオリジナルの背景画像を設定してみよう

株式会社ドリル Home > アメブロカスタマイズ > ページ全体のカスタマイズ > 【アメブロカスタマイズ】背景色やオリジナルの背景画像を設定してみよう

2013年2月14日 13:43

たまにクリックで応援して頂けると、励みになります。
⇒《人気ブログランキング》

こんにちは、ドリル鈴木です。
今回は背景のカスタマイズについて説明したいと思います。

アメブロの背景は、CSSを修正する事によって色を設定したり、画像を指定したりする事ができます。
また、画像は繰り返しの指定をする事ができ、逆にまったく繰り返さない事もできます。

修正は簡単ですので、複数の設定パターンを紹介します。
それでは、スタートです。

カスタマイズを始める前に

今回のカスタマイズはページ全体の背景を修正するカスタマイズです。
背景には色や画像を指定する事ができます。

ただし、指定する色によっては、読みにくさに繋がってしまうので、設定後は必ずチェックしてみて下さい。
あまり見難いブログは折角アクセスしてくれても、逃げてしまう大きな要因にります。

また、今回使用する背景画像はこちらです

CSSの編集画面を開く

まずは、CSSの編集画面を開いて下さい。
「ブログを書く」＞サイドバーの「ブログデザイン」の「デザインの変更」＞「CSSの編集」をクリックします。

修正前のページ

先に修正前のページになります。
CSSは新規なので追加になります。

CSSはCSSの編集の一番最後に追加して下さい。

CSSを修正して、背景色を指定する

まずはCSSを修正して、背景色を変更します。
サンプルでは違いがわかりやすい様に暗い色を指定していますが、文字は読みにくくなってしまっています。

実際はもっと薄めの色を指定する様にして下さい。

まずは、追加するCSSになります。
CSSの編集の一番最後に追加して下さい。

body {
background-color: #555555;
}

修正後のページはこちらになります。
背景色が変わっているのがわかると思います。

背景画像をアメブロにアップロードする

次に背景に画像を設定する方法について説明するのですが、その前に背景に使用する画像をアメブロにアップロードします。
アップロードの手順は以下の通りです。

1. 「ファイルを選択」をクリックし、画像選択画面を表示させる

2. 画像ファイルを選択し「開く」をクリックする

3. 画像が選択されている事を確認し、「アップロード」をクリックする

2013 02 14 1126

4. 画像のURLを取得する

2013 02 14 1127

これで背景画像のアップロードが完了し、CSSで使用出来る様になりました。

CSSを編集して、背景に画像を指定する

次に背景に画像を指定する方法です。
背景画像は設定方法によって繰り返しの方法を指定する事ができます。
また、画像の開始位置を指定する事も可能です。

なので、今回はその組み合わせと言う事で３パターンの指定方法をご紹介致します。
その際に追加するCSSのベースは以下の通りです。
こちらの項目に値を設定して修正して行きます。

body {
background-image: url(画像のURL);
background-repeat: 繰り返し方;
background-position: 背景の開始位置;
}

1. 背景画像を左上から縦方向に繰り返す

CSSの修正は以下の通りです。
「background-repeat」の設定が「repeat-y」となっている所がポイントです。

body {
background-image: url(https://stat.blogskin.ameba.jp/blogskin_images/20130214/11/8c/41/p/o00460029wcf-drill-blog1360808794312.png);
background-repeat: repeat-y;
background-position: left top;
}

修正後のページはこのようになります。
背景がページ左端で縦方向に繰り返されているのがわかります。

2. 背景画像を横方向に繰り返し、始まり位置の上をあける

CSSの修正は以下の通りです。
「background-repeat」の設定が「repeat-x」となっていて、さらに「background-position」に「 left 30px」を指定しています。

body {
background-image: url(https://stat.blogskin.ameba.jp/blogskin_images/20130214/11/8c/41/p/o00460029wcf-drill-blog1360808794312.png);
background-repeat: repeat-x;
background-position: left 30px;
}

修正後のページはこのようになります。
背景が上から30pxあけた所で横方向に繰り返されているのがわかります。
(上部にあるアメブロのメニューバー分相当の高さです)

3. 背景画像を画面全体に敷き詰める

CSSの修正は以下の通りです。
この際、「background-repeat」「background-position」はなくても構いません。

body {
background-image: url(https://stat.blogskin.ameba.jp/blogskin_images/20130214/11/8c/41/p/o00460029wcf-drill-blog1360808794312.png);
background-repeat: repeat;
background-position: left top;
}

修正後のページはこのようになります。
背景がページ全体に敷き詰められている事が確認出来ます。

違いがはっきりとご覧頂けたかと思います。
ここで使用した「background-repeat」「background-position」に関して、設定する値をまとめておきます。

●background-repeat

repeat:縦横に背景画像を繰り返します。
repeat-x:横方向にのみ背景画像を繰り返して表示します。
repeat-y:縦方向にのみ背景画像を繰り返して表示します。
no-repeat:背景画像を一回だけ表示して繰り返しません。

●background-position

位置を表すキーワードを指定:横方向:left、center、right／縦方向:top、center、bottom
%で指定:背景画像が表示される領域の左上からの距離を%で指定
数値で指定:背景画像が表示される領域の左上からの距離を数値で指定

まとめ

以上で修正は完了です。
設定その物はなれてしまえば難しくありません。
ただし、うまく利用するには色の配色や見やすさといった物を気にしなくてはいけません。

文字の色と背景の色の明度に差が出る様に、以下のサイトを参考にして下さい。

参考：色見本と配色サイト color-sample.com

予想通りに表示されましたでしょうか？
難しい所も多いので、わかりにくい所があれば、ぜひ気軽にコメントして下さい。

以上、鈴木でした。